<template>
  <div class="xiang_to">
    <!---->
    <div id="header">
      <ul id="header_top1">
        <li @click="doShang()">
          <img src="../../../../static/Aladeng_img/3_duanhuowang/duanhuowang/back.png" alt="">
        </li>
        <li>
          商品详情
        </li>
        <li @click="doGou">
          <img src="../../../../static/Aladeng_img/1_shouye/xianshiduanhuo/gouwuche.png" alt="">
        </li>
        <li>
          <img src="../../../../static/Aladeng_img/3_duanhuowang/duanhuowang/share.png" alt="">
        </li>
        <li @click="doHome">
          <img src="../../../../static/Aladeng_img/1_shouye/xianshiduanhuo/shouye.png" alt="">
        </li>
      </ul>
    </div>
    <!--轮播-->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../../../../static/Aladeng_img/3_duanhuowang/duanhuowang/listImg1.png" alt=""></div>
        <div class="swiper-slide"><img src="../../../../static/Aladeng_img/3_duanhuowang/duanhuowang/listImg1.png" alt=""></div>
        <div class="swiper-slide"><img src="../../../../static/Aladeng_img/3_duanhuowang/duanhuowang/listImg1.png" alt=""></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!--抢购-->
    <!---->
    <div id="header2">
      <ul id="header_top2">
        <li>
          抢购价：￥129.08
        </li>
        <li>
          今天15:00限量开抢
        </li>
        <li>
          <span>
            提醒我
          </span>
        </li>
      </ul>
    </div>
    <!---->
    <div>
      <ul class="xiang_biao">
        <li>
          <img src="../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/england.png" alt="">
          <div>
            <span>英国直邮</span>
            <span>焕彩萃璨花蕊唇彩4.8g焕彩萃璨花
蕊唇彩4.8g 焕彩萃璨花蕊唇彩4.8g</span>
          </div>
        </li>
        <li>￥169</li>
        <li class="xiangqing">关税：￥10 <span @click="doTankk">详情 ></span></li>
        <li>邮费：￥50</li>
      </ul>
    </div>
    <!---->
    <!--税收说明-->
    <transition name="donghua">
      <div v-show="isOpenn" class="fuwu_dianji">
        <div class="hei"></div>
        <div class="bai">

          <ul class="dingdant">
            <div class="fuwu_sm">
              <span>税费说明</span> <img @click="doTanbb" src="../../../../static/Aladeng_img/1_shouye/58_sousuo/chahao.png" alt="">
            </div>
            <li v-for="item in aMogo111">

              <div class="dingdant_zi"><span>{{item.title}}</span> <span>{{item.xiang}}</span></div>
              <div class="fuwu_xiang1">
                {{item.xiang2}}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </transition>
    <!---->
    <div class="jifengou">
      <img src="../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/jifengou.png" alt=""> <span>500000积分可抵500元，限购1件</span>
    </div>
    <!--不支持-->
    <div >
      <ul  class="dingdan">
        <li @click="doTank" v-for="item in aMogo1">

          <div class="dingdan_zi"> <img :src="item.imgUrl" alt=""><span>{{item.title}}</span></div>
        </li>
      </ul>
    </div>
    <!--服务说明-->
    <transition name="donghua">
    <div v-show="isOpen" class="fuwu_dianji">
      <div class="hei"></div>
      <div class="bai">

        <ul class="dingdant">
          <div class="fuwu_sm">
            <span>服务说明</span> <img @click="doTanb" src="../../../../static/Aladeng_img/1_shouye/58_sousuo/chahao.png" alt="">
          </div>
          <li v-for="item in aMogo11">

            <div class="dingdant_zi"> <img :src="item.imgUrl" alt=""><span>{{item.title}}</span></div>
            <div class="fuwu_xiang">
            {{item.xiang}}
            </div>
          </li>
        </ul>
      </div>
    </div>
    </transition>
    <!---->
    <div>
      <ul class="xiang_biao">
        <li class="xiao_hong">
          <img src="../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/england.png" alt="">
          <div>
            <span>直邮，下单时需要提供真实姓名和身份证号以及收货地址
请先去添加并填写这些信息</span>

          </div>
          <span class="tian">去添加</span>
        </li>
      </ul>
    </div>
    <!--灰色间隔-->
    <div class="jiange"></div>
<!---->
    <div class="alafen">
      <div class="alafen_h"></div>
      <span @click="doAlafen">查看更多</span>
      <span>阿拉粉心得</span>
    </div>
    <!---->
    <div class="ping">
      <ul class="pinglun">
        <li v-for="item in aMogo2">
          <div>{{item.title}}</div>
          <div class="yh">
            <img :src="item.imgUrl" alt="">
            <span>{{item.name}}</span>
          </div>
        </li>
      </ul>
    </div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <!---->
    <div @click="doPinpai">
      <ul class="xiang_biao1">
        <li>
          <img src="../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/brandlogo.png" alt="">
          <div class="pin">
            <div class="pinpai">品牌名字品牌名字
            <span class="cha">查看<span>10</span>件商品</span>
            </div>
            <span>英国最大彩妆品牌</span>
            <span class="guanzhu">+ 关注</span>

          </div>
          <div class="pin_xiang">品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍
品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介...</div>
        </li>
      </ul>
    </div>
    <!---->
    <!--fenlei-->
    <div class="shop_fen">
      <ul class="shop_ul">
        <li v-for="item in aMogo">
          <img :src="item.imgUrl" alt="">
          <h1>{{item.title}}</h1>
          <h1>{{item.price}}</h1>
        </li>
      </ul>
    </div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <!---->
    <div class="alafen">
      <div class="alafen_h"></div>
      <span></span>
      <span>商品描述</span>
    </div>
    <div class="miaoshi">
      该模块主要用来描述上面产品，模块大小根据商品描述的内容多
      少来决定。该模块主要用来描述上面产品该模块主要用来描述上
      面产品该模块主要用来描述上面产品该模块主要用来描述上面产
      品该模块主要用来描述上面产品该模块主要...
    </div>
    <!---->
    <div class="alafen">
      <div class="alafen_h"></div>
      <span></span>
      <span>使用方法</span>
    </div>
    <div class="miaoshi">
      该模块主要用来描述上面产品，模块大小根据商品描述的内容多
      少来决定。该模块主要用来描述上面产品该模块主要用来描述上
      面产品该模块主要用来描述上面产品该模块主要用来描述上面产
      品该模块主要用来描述上面产品该模块主要...
    </div>
    <!---->
    <div class="alafen">
      <div class="alafen_h"></div>
      <span></span>
      <span>商品图片</span>
    </div>
    <div class="miaoshi">
      该模块主要用来描述上面产品，模块大小根据商品描述的内容多
      少来决定。该模块主要用来描述上面产品该模块主要用来描述上
      面产品该模块主要用来描述上面产品该模块主要用来描述上面产
      品该模块主要用来描述上面产品该模块主要...
    </div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <!---->
    <div class="alafen">
      <div class="alafen_h"></div>
      <span></span>
      <span>阿拉粉在买</span>
    </div>
    <!---->
    <!--fenlei-->
    <div class="shop_fen">
      <ul class="shop_ul">
        <li v-for="item in aMogo">
          <img :src="item.imgUrl" alt="">
          <h1>{{item.title}}</h1>
          <h1>{{item.price}}</h1>
        </li>
      </ul>
    </div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <!---->
    <div class="alafen">
      <div class="alafen_h"></div>
      <span></span>
      <span>服务承诺 </span>
    </div>
    <!--订单信息-->
    <div>
      <ul class="dingdan1">
        <li v-for="item in aMogo3">
          <img :src="item.imgUrl" alt="">
          <div>{{item.title}}</div>
        </li>
      </ul>
    </div>
    <!---->
    <div class="tieshi">
      <div class="tieshi_img">
        <img src="../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/tips.png" alt="">
      </div>
      <div class="tieshi_ming">
      <span>运费相关：英国直邮商品相关运费为50元。</span>
        <span>价格说明：划线价、国内参考价、店头价可能是品牌专柜价、吊
牌价或品牌商提供的指导价等价格，其受国家地区、时间和市场
行情波动的影响而可能与您购物时看到的不一致，该价格仅供参
考。</span>
        <span>商品包装：海外商品包装更换较为频繁，因此顾客您收到的货品
有可能与图片不完全一致，页面图片及描述仅供参考，请以您最
终收到的实物为准，由此给您带来的不便请您多谅解。</span>
        <span>服务承诺：阿拉灯承诺站内销售商品均为海外原装正品，并会持
续为顾客们带来海外最新商品。</span>
        <h1>该处模块大下跟该处内容多少有关，内容多，模块大，反之相反</h1>
      </div>
    </div>
    <!--2按钮-->
    <div>
      <ul class="anniu">
        <li><img src="../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/lineserve.png" alt=""> <span>在线客服</span> </li>
        <li>加入购物车</li>
      </ul>
    </div>
  </div>
</template>
<script>
  import Swiper from 'swiper';

  export default {
    data() {
      return {
        isOpen:false,
        isOpenn:false,
        aMogo1:[
        {

          imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/nosupport.png',
          title:'不支持7天无忧退换'
        },
        {
          imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/fly.png',
          title:'海外直邮'
        },
        {
          imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/zhengpin.png',
          title:'正品保证'
        }
      ],

        aMogo11:[
          {

            imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/nosupport.png',
            title:'不支持7天无忧退换',
            xiang:'该商品特殊性，一经售出不存在质量问题不享受7天无理由退换。请在收到商品后在拆封或试穿之前仔细检查外观和附属品。'
          },
          {
            imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/fly.png',
            title:'海外直邮',
            xiang:'下单后英国直邮商品平均7-10个工作日发货，发货后平均            12-20个工作日到货，特殊情况除外。包裹将由专业国际物流公司为您发货，无法送达的地址可能会转为其他物流。'
          },
          {
            imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/zhengpin.png',
            title:'正品保证',
            xiang:'本商品绝对正品保证。'
          }
        ],
        aMogo111:[
          {
            title:'商品进口税',
            xiang:'',
            xiang2:'因您所购买的商品可能适用不同税率，可能导致无法全额包税，您仍需再行支付剩余税款（如有）详见下单页面。'
          },
          {
            title:'进口税税率',
            xiang:'12%',
            xiang2:'（中国海关规定，不同类目的商品征收税率不同，该商品的进口税率为12%）'
          },
          {
            title:'进口税计算',
            xiang:'进口税=商品完税价格（包括运费）*税率' ,
            xiang2:'（完税价格由海关最终认定）'
          }
        ],
        aMogo2:[
          {

            imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/headImg.png',
            title:'颜色涂抹上去看着很漂亮，棒棒哒！',
            name:'霜霜'
          },
          {
            imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/headImg.png',
            title:'颜色涂抹上去看着很漂亮，棒棒哒！',
            name:'霜霜'
          },
          {
            imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/headImg.png',
            title:'颜色涂抹上去看着很漂亮，棒棒哒！',
            name:'霜霜'
          }
        ],
        aMogo:[
          {
            imgUrl:'../../../static/Aladeng_img/3_duanhuowang/duanhuowang/listImg1.png',
            title:'不易脱妆口红',
            price:'¥ 59',
          },
          {
            imgUrl:'../../../static/Aladeng_img/3_duanhuowang/duanhuowang/listImg2.png',
            title:'花蕊唇彩',
            price:'¥ 129',
          },
          {
            imgUrl:'../../../static/Aladeng_img/3_duanhuowang/duanhuowang/listImg3.png',
            title:'娇吻玉口红',
            price:'¥ 88',
          }
        ],
        aMogo3:[
          {
            imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/zhengpin1.png',
            title:'正品保证'
          },
          {
            imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/fly1.png',
            title:'海外直邮'
          },
          {
            imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/bu.png',
            title:'超时发货补贴'
          },
          {
            imgUrl:'../../../../static/Aladeng_img/3_duanhuowang/shangpinxiangqing/picc.png',
            title:'PICC承保'
          }
        ],
      }
    },
    methods:{
      doShang(){
        this.$router.go(-1);
      },
      doGou(){
        this.$router.push('/shopping');
  },
      doHome(){
        this.$router.push('/home');
      },
      doPinpai(){
        this.$router.push('/pinpainame');
      },
      doAlafen(){
        this.$router.push('/alafen');
      },
      doTank(){
        this.isOpen = !this.isOpen
      },
      doTanb(){
        this.isOpen = !this.isOpen
      },
      doTankk(){
        this.isOpenn = !this.isOpenn
      },
      doTanbb(){
        this.isOpenn = !this.isOpenn
      }

    },
    mounted() {
      var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        }
      });
    },

    computed: {}
  }
</script>
<style scoped>
  .xiang_to{
    margin-bottom: 5rem;
    /*position: relative;*/
  }
  #header {
    width: 24rem;
    background: #e53e42;
  }
  .duan_datu img{
    width: 24rem;
  }
  #header_top1 {
    width: 100%;
    display: flex;
    padding-top: 0.5rem;
    padding-bottom: 0.3rem;
  }
  #header_top1 li{
    text-align: center;
    color: #ffffff;
    font-weight: 200;
  }
  #header_top1 li:nth-child(1){
    flex:1;

  }
  #header_top1 li:nth-child(1) img{
    width: 0.767rem;
  }
  #header_top1 li:nth-child(2){
    flex:10;
    font-size: 1rem;
    padding-top: 0.1rem;
  }
  #header_top1 li:nth-child(3){
    flex:1;
  }
  #header_top1 li:nth-child(4){
    flex: 1;
  }
  #header_top1 li:nth-child(5){
    flex: 1;
  }
  #header_top1 li:nth-child(3) img{
    width: 1.2rem;
  }
  #header_top1 li:nth-child(4) img{
    width: 1.2rem;
  }
  #header_top1 li:nth-child(5) img{
    width: 1.2rem;
  }
  /**/
  .swiper-container {
    width: 100%;
    height: 10rem;
    text-align: center;
  }
  swiper-slide img {
    width: 2.5rem;
  }
  .swiper-wrapper{
    padding-top: 1.5rem;
  }
  /**/
  #header2 {
    width: 24rem;
    background: #e53e42;
    padding: 0.2rem 0;
  }
  #header_top2 {
    width: 100%;
    display: flex;
    padding-top: 0.5rem;
    padding-bottom: 0.3rem;
  }
  #header_top2 li{
    /*text-align: center;*/
    color: #ffffff;
    font-weight: 200;
    font-size: 0.6rem;
  }
  #header_top2 li:nth-child(1){
    flex:1;
    padding-left: 1rem;
  }
  #header_top2 li:nth-child(2){
    flex:1;
    padding-left: 3rem;
  }
  #header_top2 li:nth-child(3){
    flex:1;

  }
  #header_top2 li:nth-child(3) span {
  display: inline-block;
    background-color: #ffffff;
    border-radius: 1rem;
    color: #e53e42;
    padding: 0.1rem 0.5rem;
    float: right;
    margin-right: 1rem;
  }
  /**/
  .xiang_biao {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 0.2rem;
    overflow: hidden;
  }
  .xiang_biao li:nth-child(1){
    font-size: 1rem;
    font-weight: 200;
    padding-top: 0.5rem;
}
  .xiang_biao li:nth-child(1) img{
    width: 1.333rem;
    margin: 0 0.5rem;
    display: inline-block;
  }
  .xiang_biao li:nth-child(1) div{
    display: inline-block;
    width: 20rem;
    vertical-align: -1.2rem;

  }
  .xiang_biao li:nth-child(2){
    color: #e53e42;
    padding-left: 0.5rem;
  }
  .xiang_biao li:nth-child(3),.xiang_biao li:nth-child(4){
    font-size: 0.8rem;
    font-weight: 200;
    padding-left: 0.5rem;
  }
   .xiao_hong {
    color: #e53e42;
  }
  .xiao_hong .tian {
  font-size: 0.7rem;
    border: 1px solid #e53e42;
    width: 3rem;
    height: 1rem;
    display: inline-block;
    text-align: center;
    float: right;
    margin-right: 0.5rem;
  }
  /**/
  .jifengou{
    font-size: 0.8rem;
    font-weight: 200;
    border-bottom: 1px solid #cccccc;
    padding: 0.5rem ;
  }
  .jifengou img{
    width: 2.4rem;
    padding-right: 0.5rem;
  }
  .jifengou span{
    vertical-align: 0.1rem;
    color: #4d4d4d;
  }
  /*7天*/
  .dingdan{
    display: flex;
    text-align: center;
    font-size: 0.7rem;
    color: #4d4d4d;
    padding: 0.8rem 0;
    font-weight: 200;
    border-bottom: 1px solid #cccccc;
    padding-left: 0.2rem;
  }
  .dingdan img{
    width: 1rem;
    padding-right: 0.2rem;
  }
  .dingdan li{
    flex: 1;

  }
  .dingdan li:nth-child(1){
    color: #e53e42;
  }
  .dingdan_zi span{
    vertical-align: 0.2rem;
  }
  /**/
  .jiange{
    background-color: #f2f2f2;
    width: 100%;
    height: 0.8rem;
  }
  /*alafen*/
  .alafen{
    color: #4d4d4d;
    overflow: hidden;
    padding: 0.5rem 0 0.2rem 0;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }
  .alafen span {
    padding-right: 0.5rem;
    vertical-align: 0.2rem;
  }
  .alafen span:nth-child(1){
    float: left;

  }
  .alafen span:nth-child(2){
    float: right;
    font-size: 0.8rem;
  }
  .alafen .alafen_h{
    height: 1rem;
    border: 0.1rem solid #e53e42;
    display: inline-block;
    margin-left:0.5rem;
  }
  /*pinglun*/
  .pinglun {
    display: flex;
    font-size: 0.8rem;
    font-weight: 200;
    color: #4d4d4d;
  }
  .pinglun li{
    flex: 1;
    padding: 0.5rem 0.3rem;
    border: 1px solid #cccccc;
    margin: 0.5rem;
    border-radius: 0.5rem;
  }
  .yh{
    padding: 1rem 0  0;
  }
  .yh img{
    width: 1rem;
  }
  .yh span{
  vertical-align: 0.2rem;
  }
  .ping{
    border-bottom: 1px solid #cccccc;
  }
  /**/
  /**/
  /**/
  .xiang_biao1 {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 0.2rem;
    overflow: hidden;
  }
  .xiang_biao1 li:nth-child(1){
    font-size: 1rem;
    font-weight: 200;
    padding-top: 0.5rem;
  }
  .xiang_biao1 li:nth-child(1) img{
    width: 2rem;
    margin: 0 0.5rem;
    display: inline-block;
  }
  .pin {
    display: inline-block;
    width: 20rem;

    color:#4d4d4d ;
  }
  .pinpai{
    display: inline-block;
    vertical-align: 0.05rem;
  }
  .pin span:nth-child(2){
    font-size: 0.6rem;
    vertical-align: 1.15rem;
  }
  .pin span:nth-child(3){
    font-size: 0.8rem;
    color:#4d4d4d ;
  }
  .cha {
    display: block;
    font-size: 0.7rem;
    color:#4d4d4d ;
  }
  .cha span{
    color: #e53e42;
    font-size: 0.8rem;
  }

  .xiang_biao1 li:nth-child(2){
    color: #e53e42;
    padding-left: 0.3rem;
  }
  .xiang_biao1 li:nth-child(3),.xiang_biao1 li:nth-child(4){
    font-size: 0.8rem;
    font-weight: 200;
    padding-left: 0.5rem;
  }
  .pin_xiang{
    font-size: 0.6rem;
    color: #4d4d4d;
    padding: 0.5rem;
  }
  .xiang_biao1 li .guanzhu{
    display: inline-block;
    border: solid 1px #e53e42;
    border-radius: 1rem;
    font-size: 0.7rem;
    padding: 0.05rem 0.5rem;
    float: right;
    color: #e53e42;
  }
  /**/
  /**/
  /**/
  /*fen*/
  .shop_ul{
    display: flex;
    width: 24rem;
  }
  .shop_ul li{
    flex: 1;
    text-align: center;
    width: 8rem;
    border-right: 1px solid #cccccc;
  }
  .shop_ul li:nth-child(1) img{
    width: 2.5rem;
  }
  .shop_ul li:nth-child(2) img{
    width: 2.3rem;
  }
  .shop_ul li:nth-child(3) img{
    width: 3.167rem;
  }
  .shop_ul li:nth-child(4) img{
    width: 3.167rem;
  }
  h1{
    font-family: SimHei;
    font-size: 0.8rem;
    font-weight:normal;
  }
  .shop_ul li h1:nth-child(3){
    font-weight: 200;
    color: #e53e42;
    margin-top: 0.3rem;
  }
  .shop_ul li img{
    margin: 0.6rem 0;
  }
  .shop_ul h3{
    font-size:0.55rem;
    color: #4d4d4d;
    padding-top: 0.2rem;
    margin:  auto;
  }
  .miaoshi{
  font-weight: 200;
  font-size: 0.8rem;
    color:#4d4d4d ;
    padding: 0.5rem;
  }
  /*fuwu*/
  .dingdan1{
    display: flex;
    text-align: center;
    font-size: 0.7rem;
    color: #4d4d4d;
    padding: 0.8rem 0;
    font-weight: 200;
    border-bottom: 1px solid #cccccc;
    padding-left: 0.2rem;
  }
  .dingdan1 img{
    width: 2.2rem;
    padding-right: 0.2rem;
    height: 2.2rem;
  }
  .dingdan1 li:nth-child(4) img{
    width: 2.933rem;

  }
  .dingdan1 li{
    flex: 1;

  }
  .dingdan1 li:nth-child(1){
    color: #e53e42;
  }
  .tieshi{

    background-color: #f2f2f2;
    padding: 0.3rem  0.7rem 4rem 0.7rem;

  }
  .tieshi img{
  width: 18rem;
  padding-bottom: 0.5rem;

  }
  .tieshi_img{
    text-align: center;
  }
  .tieshi span{
    font-size: 0.8rem;
    color: #4d4d4d;
    font-weight: 200;
    display: block;
    padding: 0.3rem 0;
  }
  .tieshi h1{
    font-size: 0.8rem;
    color: #e53e42;
  }
  .anniu {
    display: flex;

    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }
  .anniu li{
    flex: 1;
    text-align: center;
    padding: 0.8rem 0;
    font-weight: 200;
  }
  .anniu li:nth-child(2){
    background-color: #e53e42;
    color: #ffffff;

  }
  .anniu li span{
    vertical-align: 0.2rem;
  }
  /**/
  .fuwu_dianji{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
  }
  .fuwu_dianji .hei{
    height: 50%;
    background-color: rgba(0,0,0,0.45);
  }
  .fuwu_dianji .bai{
    background-color: #ffffff;
    height: 50%;
  }
  /*tan7*/
  .dingdant{
    /*display: flex;*/
    /*text-align: center;*/
    font-size: 0.7rem;
    color: #4d4d4d;
    padding: 0.8rem 0;
    font-weight: 200;
    padding-left: 0.2rem;
  }
  .dingdant img{
    width: 1rem;
    padding-right: 0.2rem;
  }
  .dingdant li{
    border-top: 1px solid #cccccc;
    padding:  0.5rem;
  }
  .dingdant li:nth-child(1) .dingdant_zi{
    color: #e53e42;
  }
  .dingdant_zi span{
    vertical-align: 0.2rem;
  }
  .fuwu_xiang{
    padding: 0 1.2rem;
  }
  .fuwu_xiang1{
    padding-left:3.9rem;
  }
  .fuwu_sm{
    text-align: center;
    padding-bottom: 0.7rem;
  }
  .fuwu_sm img{
    width: 1rem;
    float: right;

  }
  .fuwu_sm span{
    vertical-align: 0.25rem;
  }
  .donghua-enter,.donghua-leave-to{
    transform: translateY(100%);
  }
  .donghua-enter-active,.donghua-leave-active{
    transition: all 0.1s;
  }
  /*详情*/
  .xiangqing span{
    display: inline-block;
    border: 1px solid #e53e42;
    font-size: 0.5rem;
    vertical-align: 0.2rem;
    padding: 0 0.2rem;
    color: #e53e42;
  }
</style>
